How to Optimize the Divi Gallery Module

Divi theme is a great theme for people who aren’t tech-savvy. The Divi Gallery Module is a module where you can create galleries with a slideshow effect. If you have many images in one or more galleries on a page, that page will have a lot of images that load without being seen. In this tutorial, I’ll show you how to optimize the Divi Gallery Module with a few code snippets.

In a recent project, I had a page with a lot of Divi Galleries with the slider effect. That page, when fully loaded, had over 270MB in size and it would load in 4.5 minutes. That page also had videos and other resources which were not galleries, but after the code, I’ll show you here, that page (initial) size was reduced to 40MB and the time required to load to 30sec.

So, this code has reduced the page size by 85% and the load time by 88%. That is a significant performance improvement, don’t you think?:)

Be aware that this code will work only for WordPress 4.7 and above.

Images in Divi Gallery Module

All the images are loaded with the default markup, having the src attribute filled with the URL of the image. That’s fine. But when you have a lot of images, your visitors will have to wait some time for images to load. That could also hurt their data usage.

What if we put the image in a custom attribute and put a placeholder image (of few kb’s) to every image src attribute?

The shortcode of the Divi Gallery is . With the filter do_shortcode_tag, which was introduced in WordPress 4.7, we can change the output of the gallery.

In the function my_gallery_shortcode, we are checking if we are on the tag et_pb_gallery. If we are on that tag, we will change the output of the shortcode.

You can also enqueue a separate JavaScript file that will enhance the gallery functionality if you don’t have a JavaScript file already.

We are also checking if that script was already enqueued so we don’t have to do it more than once.

To change the output, we are using the regex. The function that we will use to perform the regex is my_preg_lazyload.

In this function, we are placing the value of src attribute as data-original. The src attribute is now set to a placeholder image. You could set your own placeholder image there.

If the JavaScript is disabled, we will show the original image inside the noscript tag.

Enhancing the Divi Gallery with JavaScript

Now that we have all the images set with placeholders, we need to set the first image of each gallery to the original source. You could do that also with some inView scripts to check if the visitor is able to see that image. But for the purpose of this tutorial, I’ll just show you how to set those images on page load.

We are iterating through each gallery with the class .et_pb_gallery_items. Since each image is wrapped inside an element with the class .et_pb_gallery_item, we need to check the first element with that class. After that, we are getting the image inside the element and then we are changing the value of the src to the original value.

Loading the next image in Divi Gallery on request

The first image is now fine. But, what when we click on the next image? What will happen then? Nothing. The image will still be set as a placeholder image.

We don’t want that. We want the original one. So how to do that? The JavaScript of Divi slider has a trigger placed just before the next image is loaded. That trigger is simple_slider_before_move_to.

There are two parameters passed to that trigger: direction & next slide element. We will need to use the second parameter.

We are then finding the attribute data-original in the next slide. When we find that, we will know that we have found the image. When we know that, we can change the src value to the original image.

Conclusion

Divi Gallery module is a great module. I have tried it a lot. The only downside of it, was that it loads all the images in advance even though our visitors won’t see them. They’ll see them only on request (or on auto load). By reading the code of Divi shortcodes & JavaScript, you’re able to understand how everything works and also how you can enhance such code. This is nothing specific to Divi. Searching the code is a good practice even on original WordPress code.

Do you use Divi for building websites? Have you ever optimized some parts of Divi or something else?

If you want to up your WordPress development knowledge, I have a course, you might like. Building Themes, Plugins, optimizing them & selling is something you might want to know? Check it out: Become a WordPress Developer.

Become a Sponsor